<template>
  <section class="link-box">
    <div class="linkClass">
      <a href="javascript:void(0)"
         :title="value"
         @click="handleClick">{{ value }}
      </a>
    </div>
    <span v-if="row.combineId"
          class="order-type"> 合单 </span>
    <span v-if="row.price && row.price.matched && !row.price.refresh"
          class="order-type"> 合约 </span>
    <span v-if="row.price && row.price.refresh"
          class="order-type"> 重算 </span>
    <span>
      <!-- <icon-svg class-name="iconClass"
                icon-name="fuzhi"
                @click="handleCopy" /> -->
      <i class="el-icon-copy-document icon_sty_1"
         @click="handleCopy" />
    </span>
  </section>
</template>

<script>
export default {
  name: "QuoteFreightLink",
  props: {
    value: {
      type: String,
      default: null
    },
    row: {
      type: Object,
      default: () => { }
    },
    paramsData: {
      type: Object,
      default: () => { }
    },
    url: {
      type: String,
      default: null
    }
  },
  computed: {
    query () {
      let paramsData = { ...this.paramsData };
      if (this.row.combineId) {
        paramsData = {
          combineId: this.row.combineId,
          status: '30',
        }
      }
      return paramsData;
    },
    path () {
      return this.row.combineId ? "combineQuoteFee" : this.url
    },
  },
  methods: {
    handleClick () {
      const { href } = this.$router.resolve({
        name: this.path,
        query: this.query
      });
      window.open(href, "_blank");
    },
    // 复制
    handleCopy () {
      var copyValueInput = document.createElement("input");
      copyValueInput.value = this.value;
      document.body.appendChild(copyValueInput);
      copyValueInput.select();
      document.execCommand("copy");
      this.$message({ type: "success", message: "复制成功" });
      document.body.removeChild(copyValueInput);
    }
  }
};
</script>
<style scoped>
.link-box {
  display: flex;
  align-items: center;
}
.linkClass {
  max-width: 200px !important;
  color: var(--prev-color-primary) !important;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.iconClass {
  margin-left: 2px;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
}
.icon_sty_1 {
  margin-left: 2px;
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  color: chocolate;
}
</style>